<div class="AddProject scrollingContent">
    <div nz-row>
        <div nz-col nzSpan="12" nzOffset="6">
            <h2>Create a new project</h2>
            <form nz-form (ngSubmit)="createProject()" nzLayout="vertical">
                <nz-form-item>
                    <nz-form-label>Project name</nz-form-label>
                    <nz-form-control>
                        <input nz-input name="projectname" [(ngModel)]="project.name" (keyup)="generateKey($event.target.value)">
                    </nz-form-control>
                </nz-form-item>
                <nz-alert *ngIf="nameError" nzType="error" nzMessage="project name is mandatory"></nz-alert>
                <nz-form-item>
                    <nz-form-label>Project unique key</nz-form-label>
                    <nz-form-control>
                        <input nz-input name="projectkey" [(ngModel)]="project.key">
                    </nz-form-control>
                </nz-form-item>
                <nz-alert *ngIf="keyError" nzType="error" nzMessage="project unique key is mandatory and must be in upper case"></nz-alert>
                <nz-form-item>
                    <nz-form-label>Description</nz-form-label>
                    <nz-form-control>
                        <textarea nz-input name="projectdescription" [(ngModel)]="project.description"></textarea>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label>Project icon (Optional)</nz-form-label>
                    <nz-form-control>
                        <div *ngIf="!fileTooLarge && project.icon">
                            <img class="proj-icon" [src]="project.icon" alt="icon"/>
                        </div>
                        <app-upload-button accept=".png,.jpg,.jpeg" image="true" (event)="fileEvent($event)"></app-upload-button>
                    </nz-form-control>
                </nz-form-item>
                <nz-alert *ngIf="fileTooLarge" nzType="error" nzMessage="Your file is too large (max 100Ko)"></nz-alert>
                <hr>
                <nz-alert nzType="info" nzMessage="{{'project_add_group_help' | translate}}"></nz-alert>
                <nz-form-item>
                    <nz-form-label>
                        {{ 'project_permission_form_wizard_title' | translate }} <a class="pointing" (click)="groupModalVisible = true">{{ 'project_permission_form_wizard_new' | translate }}</a>
                    </nz-form-label>
                    <nz-form-control>
                        <nz-select name="group" nzShowSearch [ngModel]="group?.id" (ngModelChange)="setGroup($event)">
                            <nz-option *ngFor="let g of groupList" [nzValue]="g.id" [nzLabel]="g.name"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nzJustify="end">
                    <nz-form-control>
                        <button nz-button nzType="primary" name="createproject" [nzLoading]="loading">
                            <i nz-icon nzType="save" nzTheme="outline"></i>Create
                        </button>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </div>
    </div>
</div>
<nz-modal nzTitle="Create a group" [nzVisible]="groupModalVisible">
    <div *nzModalContent>
        <form nz-form>
            <nz-form-item>
                <nz-form-label>Group name</nz-form-label>
                <nz-form-control>
                    <input nz-input type="text" name="groupname" [(ngModel)]="newGroup.name">
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>
    <div *nzModalFooter>
        <button nz-button (click)="groupModalVisible = false">Cancel</button>
        <button nz-button nzType="primary" name="creategroup" (click)="createGroup()" [nzLoading]="loading" [disabled]="loading">Create</button>
    </div>
</nz-modal>
